<section class="todoapp">
    <header class="header">
        <h1>todos</h1>
        <input class="new-todo" placeholder="What needs to be done?" autofocus="" 
		[(ngModel)]="newTodoText" (keyup.enter)="addTodo()">
    </header>
    <section class="main" *ngIf="todoStore.todos.length > 0">
        <input class="toggle-all" type="checkbox" 
		*ngIf="todoStore.todos.length" #toggleall 
		[checked]="todoStore.allCompleted()" 
		(click)="todoStore.setAllTo(toggleall.checked)">
        <ul class="todo-list">
            <li *ngFor="#todo of todoStore.todos"
			 [class.completed]="todo.completed" 
			[class.editing]="todo.editing">
                <div class="view">
                    <input class="toggle" type="checkbox"
					 (click)="toggleCompletion(todo)"
					 [checked]="todo.completed">
                    <label (dblclick)="editTodo(todo)">{{todo.title}}</label>
                    <button class="destroy" (click)="remove(todo)"></button>
                </div>
                <input class="edit" *ngIf="todo.editing" [value]="todo.title" 
				#editedtodo (blur)="stopEditing(todo, editedtodo.value)" 
				(keyup.enter)="updateEditingTodo(todo, editedtodo.value)" 
				(keyup.escape)="cancelEditingTodo(todo)">
            </li>
        </ul>
    </section>
    <footer class="footer" *ngIf="todoStore.todos.length > 0">
        <span class="todo-count">
			<strong>{{todoStore.getRemaining().length}}</strong> 
			{{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>
        <button class="clear-completed" *ngIf="todoStore.getCompleted().length > 0" 
			(click)="removeCompleted()">Clear completed</button>
    </footer>
</section>